<template>
    <div>
        <div id="main" style="width:100%;height:800px"></div>
    </div>
</template>

<script>
import { TooltipComponent } from 'echarts/components'
import { TreeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
export default {
    data() {
        return {}
    },
    created() {
        this.$echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            const myChart = this.$echarts.init(document.getElementById('main'))
            const params = this.recursion([
                {
                    name: '北京',
                    children: [
                        {
                            name: 'data',
                            children: [
                                {
                                    name: 'converters',
                                    children: [
                                        { name: 'Converters', value: 721 },
                                        {
                                            name: 'DelimitedTextConverter',
                                            value: 4294,
                                        },
                                    ],
                                },
                                {
                                    name: 'DataUtil',
                                    value: 3322,
                                },
                            ],
                        },
                        {
                            name: 'display',
                            children: [
                                { name: 'DirtySprite', value: 8833 },
                                { name: 'LineSprite', value: 1732 },
                                { name: 'RectSprite', value: 3623 },
                            ],
                        },
                        {
                            name: 'flex',
                            children: [{ name: 'FlareVis', value: 4116 }],
                        },
                        {
                            name: 'query',
                            children: [
                                { name: 'AggregateExpression', value: 1616 },
                                { name: 'And', value: 1027 },
                                { name: 'Arithmetic', value: 3891 },
                                { name: 'Average', value: 891 },
                                { name: 'BinaryExpression', value: 2893 },
                                { name: 'Comparison', value: 5103 },
                                {
                                    name: 'methods',
                                    children: [
                                        { name: 'add', value: 593 },
                                        { name: 'and', value: 330 },

                                        { name: 'isa', value: 461 },

                                        { name: 'or', value: 323 },
                                        { name: 'orderby', value: 307 },
                                        { name: 'range', value: 772 },
                                        { name: 'select', value: 296 },
                                        { name: 'stddev', value: 363 },
                                        { name: 'sub', value: 600 },
                                        { name: 'sum', value: 280 },
                                        { name: 'update', value: 307 },
                                        { name: 'variance', value: 335 },
                                        { name: 'where', value: 299 },
                                        { name: 'xor', value: 354 },
                                        { name: 'x_x', value: 264 },
                                    ],
                                },
                                { name: 'Minimum', value: 843 },
                                { name: 'Not', value: 1554 },
                                { name: 'Or', value: 970 },
                                { name: 'Query', value: 13896 },
                            ],
                        },
                        {
                            name: 'scale',
                            children: [
                                { name: 'IScaleMap', value: 2105 },
                                { name: 'LinearScale', value: 1316 },
                                { name: 'LogScale', value: 3151 },
                                { name: 'OrdinalScale', value: 3770 },
                                { name: 'QuantileScale', value: 2435 },
                                { name: 'QuantitativeScale', value: 4839 },
                                { name: 'RootScale', value: 1756 },
                                { name: 'Scale', value: 4268 },
                                { name: 'ScaleType', value: 1821 },
                                { name: 'TimeScale', value: 5833 },
                            ],
                        },
                    ],
                },
            ])
            const option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove',
                },
                series: [
                    {
                        type: 'tree',
                        id: 0,
                        name: 'tree1',
                        data: params,

                        top: '10%',
                        left: '8%',
                        bottom: '22%',
                        right: '20%',

                        symbolSize: 7,

                        edgeShape: 'polyline', // curve 曲线 ， polyline 直线
                        edgeForkPosition: '63%',
                        initialTreeDepth: 3,

                        lineStyle: {
                            width: 2,
                        },

                        label: {
                            backgroundColor: '#fff',
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                        },

                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left',
                            },
                        },

                        emphasis: {
                            focus: 'descendant',
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750,
                    },
                ],
            }

            myChart.setOption(option)
        },
        recursion(list) {
            for (let item of list) {
                if (item.children && item.children.length) {
                    this.recursion(item.children)
                    item.symbol =
                        'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg' //修改图片
                    item.symbolSize = [15, 15]
                } else {
                    item.symbol =
                        'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg' //修改图片
                    item.symbolSize = [15, 15]
                }
            }
            return list
        },
    },
}
</script>

<style lang="less" scoped>
</style>